<template>
  <div>
    <!-- 头部 -->
    <div class="shang_list">
      <div class="list_left" @click="getadds">新增品牌</div>
      <div class="list_left" @click="toggleSelection()">批量删除</div>
    </div>
    <!-- 底部列表 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      border
      style="width: 80%"
      @selection-change="handleSelectionChange"
      :header-cell-style="{ background: '#F6F6F6', textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="品牌名" width="120">
        <template v-slot="{ row }">
          <div>{{ row.brandName }}</div>
        </template>
      </el-table-column>
      <el-table-column label="logo图标" width="120">
        <template v-slot="{ row }">
          <div class="image">
            <img :src="row.image" alt="" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序"> </el-table-column>
      <el-table-column label="是否展示在首页">
        <template v-slot="{ row }">
          <div>
            {{ row.xianshi }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClicka(scope.row)">查看详情</el-button>
          <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
          <el-button type="text" size="small" @click="rehandleClick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getjadminstrion, remolejadmin } from '../../../api/index'
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      handleSelectionChanges: [],
    }
  },
  created() {
    this.onlist()
  },
  methods: {
    //删除所选的数据
    rehandleClick(row) {
      remolejadmin({ id: row.id }).then((res) => {
        this.onlist()
      })
    },
    //新增商品
    getadds() {
      this.$router.push({ name: 'mybrad' })
    },
    handleClick(row) {
      console.log(row)
      this.$router.push({
        name: 'detailsa',
        query: {
          id: row.id,
          brandName: row.brandName,
          image: row.image,
          sort: row.sort,
          xianshi: row.xianshi,
        },
      })
    },
    //查看详情
    handleClicka(row) {
      console.log(row)
      this.$router.push({
        name: 'goodsApp',
        query: {
          id: row.id,
          brandName: row.brandName,
          image: row.image,
          sort: row.sort,
          xianshi: row.xianshi,
          addspp: row.addspp,
        },
      })
    },
    //获取当前数据
    onlist() {
      getjadminstrion().then((res) => {
        // console.log(res)
        this.tableData = res.data
        this.tableData = this.tableData.map((item) => {
          if (item.xianshi == 0) {
            item.xianshi = '不显示'
          } else if (item.xianshi == 1) {
            item.xianshi = '显示'
          }
          return { ...item }
        })
      })
    },
    //全选是否删除
    toggleSelection() {
      //提交
      // console.log(this.handleSelectionChanges)
      for (var i = 0; i < this.handleSelectionChanges.length; i++) {
        // console.log('id:' + this.handleSelectionChanges[i].id)
        remolejadmin({ id: this.handleSelectionChanges[i].id }).then((res) => {
          console.log(res)
          this.onlist()
        })
      }
    },
    //获取指定表行的数据
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.handleSelectionChanges = val
    },
  },
}
</script>
<style lang="scss" scoped>
.image {
  width: 30px;
  height: 30px;
  text-align: center;
  margin-left: 30px;
  img {
    width: 100%;
  }
}

.shang_list {
  width: 100%;
  height: 40px;
  margin-bottom: 40px;
  padding: 0 0 0 200px;
  display: flex;
  box-sizing: border-box;
  //left
  .list_left {
    width: 200px;
    height: 30px;
    border: 1px solid #ddd;
    text-align: center;
    line-height: 30px;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 30px;
  }
}
</style>
